<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 折线和柱形混合
 * @LastEditTime: 2021-11-29 16:54:55
 * @FilePath: \tianjushi-kanban\src\components\charts\LineBar1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import {
  onMounted,
  toRefs,
  ref,
  reactive,
  watch,
  computed,
  nextTick,
  version,
} from "vue";
import { resetChartStyle, showLoading, hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: {
        xData: ["1月", "2月", "3月", "4月", "5月"],
        yData: [
          {
            value: [200, 300, 400, 200, 300],
            title: "时间",
            color: ["#fee140", "#027eff", "#0286ff"],
          },
          {
            value: [200, 200, 100, 200, 200],
            title: "完成率",
            color: "#f5804d",
          },
        ],
      },
    },
    fontSize: {
      default: 16,
      type: Number,
    },
    min: {
      default: 0,
      type: Number,
    },
    unit: {
      type: String,
      default: "",
    },
  },
  setup: function (props, context) {
    let chartInstance = null; //折线不能用响应式接收echart
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      const option = {
        color: ["#3398DB"],
        legend: {
          left: "center",
          top: "5%",
          textStyle: {
            color: "#fff",
            fontSize: props.fontSize,
          },
          data: [
            props.chartdata.yData[0].title,
            props.chartdata.yData[1].title,
          ],
        },
        grid: {
          left: "10px",
          right: 0,
          bottom: "15%",
          top: "15%",
          containLabel: true,
          z: 22,
        },
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: props.chartdata.xData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              color: "#fff",
              fontSize: props.fontSize,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: props.title,
            nameTextStyle: {
              color: "#fff",
              fontSize: props.fontSize,
            },
            gridIndex: 0,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            // min: min,
            // max: 100,
            axisLine: {
              lineStyle: {
                color: "#0c3b71",
              },
            },
            axisLabel: {
              color: "rgb(170,170,170)",
              formatter: "{value}",
            },
          },
          {
            type: "value",
            gridIndex: 0,
            min: props.min,
            max: 100,
            splitNumber: 12,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "rgb(170,170,170)",
              formatter: "{value}",
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
              },
            },
          },
        ],
        series: [
          {
            name: props.chartdata.yData[0].title,
            type: "bar",
            barWidth: "30px",
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
              show: true,
              position: "top",
              distance: 10,
              fontSize: props.fontSize,
              color: props.chartdata.yData[0].color[0],
            },
            itemStyle: {
              normal: {
                //barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: props.chartdata.yData[0].color[0],
                  },
                  {
                    offset: 0.5,
                    color: props.chartdata.yData[0].color[1],
                  },
                  {
                    offset: 1,
                    color: props.chartdata.yData[0].color[2],
                  },
                ]),
              },
            },
            data: props.chartdata.yData[0].value,
            zlevel: 11,
          },
          {
            name: props.chartdata.yData[1].title,
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            label: {
              show: true,
              position: "top",
              distance: 10,
              fontSize: props.fontSize,
              color: props.chartdata.yData[1].color,
            },
            itemStyle: {
              normal: {
                color: props.chartdata.yData[1].color,
                borderColor: props.chartdata.yData[1].color,
                lineStyle: {
                  color: props.chartdata.yData[1].color,
                },
              },
            },
            // markPoint: {
            // 	label: {
            // 		normal: {
            // 			textStyle: {
            // 				color: '#fff',
            // 				fontSize: 16,
            // 			}
            // 		}
            // 	},
            // 	symbolSize: 70,
            // 	data: [{
            // 		type: 'max',
            // 		name: '最大值',

            // 	}, {
            // 		type: 'min',
            // 		name: '最小值'
            // 	}]
            // },
            data: props.chartdata.yData[1].value,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(props.chartdata.yData[1].color, 0.7),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(props.chartdata.yData[1].color, 0),
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0,179,244, 0.9)",
                shadowBlur: 20,
              },
            },
          },
        ],
      };
      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>